@keyframes pulse {
  0% {
    width: 0%;
  }
  80% {
    opacity: 1;
    width: 100%;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

.bar {
  display: var(--pulsing-display);
  position: absolute;
  width: 100%;
  height: 100%;

  & div {
    width: 25%;
    height: 100%;
    background: linear-gradient(-90deg, alpha(var(--spike-color), 0.75), #fff0);
    animation: pulse 2s linear 0s infinite normal;
  }
}

.box {
  position: relative;
  height: 100%;
  width: var(--percentage);
  min-width: var(--thickness);

  @mixin dark {
    background-color: alpha(var(--mantine-color-gray-4), 0.8);
  }

  @mixin light {
    background-color: alpha(var(--bg-color), 0.8);
  }
}

.back {
  display: flex;
  align-items: center;
  height: var(--thickness);
  width: 100%;

  @mixin dark {
    background-color: alpha(var(--mantine-color-gray-6), 0.8);
  }

  @mixin light {
    background-color: alpha(var(--mantine-color-light-4), 0.8);
  }
}

@keyframes spike {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.spikes {
  display: var(--pulsing-display);
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;

  @mixin dark {
    background-color: var(--mantine-color-white);
  }

  @mixin light {
    background-color: var(--spike-color);
  }

  & div {
    animation: spike 2s linear 0s infinite alternate;
  }
}

.spike {
  position: absolute;
}

.l {
  left: 0;
  top: var(--neg-spike-length);
  height: var(--spike-length);
  width: 100%;
  background: linear-gradient(0deg, alpha(var(--spike-color), 0.75), #fff0);
}

.r {
  left: 0;
  bottom: var(--neg-spike-length);
  height: var(--spike-length);
  width: 100%;
  background: linear-gradient(180deg, alpha(var(--spike-color), 0.75), #fff0);
}

.t {
  right: var(--neg-spike-length);
  top: 0;
  height: 100%;
  width: var(--spike-length);
  background: linear-gradient(90deg, alpha(var(--spike-color), 0.75), #fff0);
}

.b {
  left: var(--neg-spike-length);
  top: 0;
  height: 100%;
  width: var(--spike-length);
  background: linear-gradient(-90deg, alpha(var(--spike-color), 0.75), #fff0);
}
